<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet"href="https://cdn.staticfile.org/font-awesome/6.0.0/css/all.css">

		<link rel="stylesheet" href="{{ static('css/index.css') }}"/>

		<!-- 新 Bootstrap5 核心 CSS 文件 -->
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css">
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
	</head>
	<body>
       <div class="head">

           <a href="{{ url('mainPage') }}" class="nav-link"><div class="h3">Haoyunlai driving school</div></a>

           <nav class="navbar navbar-expand-sm">

              <!-- Links -->
              <ul class="navbar-nav">
                <li class="nav-item">
                  <a class="nav-link" href="{{ url('index') }}">Home</a>
                </li>
                  {% if user.identity_c == '1' %}
                      <li class="nav-item">
                        <a class="nav-link" href="{{ url('cancel_teacher_day') }}">Ask for leave</a>
                    </li>
                  {% else %}
                      {% if user.is_buy %}
                        <li class="nav-item">
                          <a class="nav-link" href="{{ url('cindex') }}">Appiontment training</a>
                        </li>
                        <li class="nav-item">
                          <a class="nav-link" href="{{ url('book_exaln@index') }}">Appiontment examination</a>
                        </li>
                          {% else %}
                          <li class="nav-item">
                          <a class="nav-link" id="sign" style="color: crimson" href="#">Sign driving school</a>
                        </li>
                      {% endif %}
                  {% endif %}
              </ul>

            </nav>

            <nav class="navbar navbar-expand-sm ">
                <ul class="navbar-nav">
                    <li class="nav-item">
                        <a class="nav-link" type="top" href="mailto:xxx@xxx.com" target="_blank">Contact us</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" type="top" href="{{ url('onst') }}">About us</a>
                    </li>
                    <li class="nav-item">
                        <a href="{{ url('logout') }}" class="btn btn-danger">Logout</a>
                    </li>
                </ul>
            </nav>

       </div>
        <div class="container-xl">
            <h1>Driver's training management system</h1>
           {% if user.identity_c == '1' %}
                <h1 style="color: #0a58ca">You're a coach</h1>
           {% else %}
                <h1 style="color: #0a58ca">You're a student</h1>
           {% endif %}
            <table class="table table-dark table-striped">
                <tbody>
                  <tr>
                     <th>username</th><td>{{ user.username }}</td>
                  </tr>
                  <tr>
                    <th>name</th><td>{{ user.name }}</td>
                  </tr>
                  <tr>
                    <th>age</th><td>{{ user.age }}</td>
                  </tr>
                  <tr>
                    <th>tel</th><td>{{ user.tel }}</td>
                  </tr>
                  <tr>
                      <th>Driving license type</th><td>{{ user.get_driving_license_type_display() }}</td>
                  </tr>

                </tbody>
                </table>
            <hr/>
            {% if user.identity_c == '0' %}
                {% if user.is_buy %}
                <div class="book-msg ">
                    <h2>reserve information</h2>
                    {% if book_msg %}
                        <table class="table table-dark table-striped">
                            <thead>
                              <tr>
                                <th>datetime</th>
                                <th>coach</th>
                                <th>coach tel</th>
                                <th>evaluate</th>
                                <th>cancel</th>
                              </tr>
                            </thead>
                            <tbody>
                            {% for i in book_msg %}
                              <tr id="{{ i.id }}">
                                <td>{{ i.train_time }}</td>
                                <td>{{ i.teacher.name }}</td>
                                <td>{{ i.teacher.tel }}</td>
                                  <td>{%if not i.drop_class%}{% if not i.teacher_leave %}{% if i.train_time < datenow %}{% if i.com == None %}
                                      <button id="comm" class="btn btn-sm btn-primary">comment</button>{% else %}{{ i.com.title }} : {{ i.com.stars }}{% endif %}{% else %}<span>hasn't yet begun </span>{% endif %}{% else %}<span>teacher leave</span>{% endif %}{%else%}<span>Course cancelled</span>{%endif%}</td>
                                  <td>{% if i.drop_class == None %}{% if i.train_time < datenow %}<button class="btn btn-primary btn-sm disabled">time out</button>{% else %}<button class="btn-primary btn btn-primary" id="cancel" data-id="{{ i.id }}" data-c="{{ i.teacher.username }}">cancel</button>{% endif %}{% else %}<button class="btn btn-warning disabled">Course cancellation</button>{% endif %}</td>
                              </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                                        {% else %}
                        <span>There was no reservation information</span>
                    {% endif %}
                    <hr>
                    <h2>Blacklist</h2>
                    {% if blacklist %}
                        <table class="table table-dark table-striped">
                            <thead>
                              <tr>
                                <th>coach</th>
                                <th>coach tel</th>
                                <th>datetime</th>
                              </tr>
                            </thead>
                            <tbody>
                            {% for i in blacklist %}
                              <tr>
                                <td>{{ i.teacher }}</td>
                                <td>{{ i.teacher.tel }}</td>
                               <td>{{ i.t }}</td>
                              </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                                        {% else %}
                        <span>Good credit, not added to the blacklist</span>
                    {% endif %}

                </div>
                <hr/>
                <div class="examination ">
                    <h2>Test Booking Information</h2>
                    {% if examination %}
                         <table class="table table-dark table-striped">
                            <thead>
                              <tr>
                                <th>datetime</th>
                                <th>type</th>
                                <th>score</th>
                                <th>cancel</th>
                              </tr>
                            </thead>
                            <tbody>
                            {% for i in examination %}
                              <tr>
                                <td>{{ i.exaln.examination_time }}</td>
                                <td>{{ i.exaln.get_examination_type_display() }}</td>
                                <td>{{ i.score }}</td>
                                  <td><form action="{{url('cancel_exaln') }}"><input type="hidden" name="id" value="{{ i.exaln.id }}"> {% if not i.score %}<input type="submit" class="btn btn-primary btn-sm" value="cancel">{% else %}<span>Have test</span>{% endif %}</form></td>
                              </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    {% else %}
                        <span>I haven't booked an exam yet</span>
                    {% endif %}
                </div>
                {% endif %}
            {% else %}
                <h2>My courses </h2>
                <table class="table table-dark table-striped">
                        <thead>
                          <tr>
                            <th>student name</th>
                            <th>type</th>
                            <th>datetime</th>
                            <th>evaluate</th>
                          </tr>
                        </thead>
                        <tbody>
                        {% for i in coach_courses %}
                          <tr>
                            <td>{{ i.student.name }}</td>
                            <td>{{ i.student.get_driving_license_type_display() }}</td>
                            <td>{{ i.train_time }}</td>
                            <td>{% if not i.teacher_leave %}{% if i.com.title or i.com.stars %}{{ i.com.title }} : {{ i.com.stars }}{% else %}No evaluation yet{% endif %}{% else %}teacher leave{% endif %}</td>
                          </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                <hr>
                <h2>Passing rate</h2>
                <table class="table table-dark table-striped">
                    <thead>
                        <th>sbj 1</th>
                        <th>sbj 2</th>
                    <th>sbj 3</th>
                    <th>sbj 4</th>
                    </thead>

                    <tbody>
                        <td id="sbj1"></td>
                    <td id="sbj2"></td>
                    <td id="sbj3"></td>
                    <td id="sbj4"></td>
                    </tbody>
                </table>
                <script>
                    $.get(
                        '{{ url('get_statistics') }}',
                        {},
                        function (data) {
                            data = data.data
                            $('#sbj1').text(data[0])
                            $('#sbj2').text(data[1])
                            $('#sbj3').text(data[2])
                            $('#sbj4').text(data[3])
                        }
                    )
                </script>
            {% endif %}
        </div>
	</body>
    <script>
        {% if not_time_out.drop_class %}
            alert('Course cancellation:{{ not_time_out.drop_class }}')
        {% endif %}
    </script>

	<!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
	<script src="https://cdn.staticfile.org/popper.js/2.9.3/umd/popper.min.js"></script>
	<!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
	<script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
	<script src="{{ static('js/index.js') }}"></script>
    <script>
        $('body').on('click','#comm',function (e) {
            const  username = $(this).parent().parent().attr('id')
            $('body').append('\
            <div id="mask" style="z-index: 999;position: fixed;top: 0;left: 0;bottom: 0;right: 0;background-color: rgba(255,255,255,0.4);display: flex;justify-content: center;align-items: center">\
                <form style="width: 40%;height: 30%;background-color: #000;border-radius: 20px;display: flex;flex-direction: column;padding: 2%" action="{{ url('comm') }}" method="post">\
                    <h2 style="color: #f1f1f1;margin-bottom: 10px">Comment</h2>\
                    {{ csrf_input }}\
                    <input class="form-control" type="hidden" value="'+username+'" name="id" style="margin-bottom: 10px">\
                    <input class="form-control" type="text" placeholder="Please enter the evaluation content" name="title" style="margin-bottom: 10px">\
                    <input class="form-control" type="number" placeholder="Please enter the evaluation score: 1-5 stars" name="stars" style="margin-bottom: 10px">\
                    <input type="submit" class="btn btn-primary btn-sm">\
                </form>\
            </div>\
            ')
        })
        $('body').on('click','#mask',function (e) {
            if(e.currentTarget===e.target){
                $(this).remove()
            }
        })
        
        $('body').on('click','#sign', function (e) {

            $.get(
                '{{ url('sign') }}',
                {},
                function (data) {
                    $('body').append($(data))
                }
            )

        })

        $('body').on('click','#cancel', function (e) {
            const id = $(this).attr('data-id')
            const t = $(this).attr('data-c')
            $.post(
                '{{ url('cancel') }}',
                {
                    csrfmiddlewaretoken:'{{ csrf_token }}',
                    id:id,
                    t_uname:t
                },
                function (data) {
                    console.log(111)
                    alert(data)
                    window.location.reload()
                }
            )

        })

    </script>
</html>
